<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .box {
            width: 500px;
            background-color: blanchedalmond;
            margin: auto;
            text-align: center;
            padding: 14px 0;
        }

        .username {
            width: 300px;
            height: 30px;
            padding: 0 10px;
            border: none;
        }

        .content {
            width: 300px;
            height: 100px;
            border: none;
            padding: 10px;
            resize: none;
        }

        .btn {
            width: 80px;
            height: 30px;
            border: 0;
            background-color: pink;
            color: #fff;
        }

        .hide {
            background-color: aquamarine;
            width: 500px;
            height: 300px;
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>留言板</h1>
        <p><input type="text" class="username" placeholder="请输入昵称" v-model="name"></p>
        <p><textarea class="content" placeholder="请输入评论" v-model="text"></textarea></p>
        <button class="btn" v-on:click="changeBtn">发送</button>
        <p>大家都在说</p>
        <ul class="message">
            <li v-for="(item,index) in arr" ws:key="index">
                <h5>{{item.name}}</h5>
                <p>{{item.text}}</p>

                <div v-for="(item,index) in arr2" ws:key="index">
                    <h5>{{item.name2}}</h5>
                    <p>{{item.text2}}</p>
                </div>

                <button v-on:click="flag=!flag">回复</button>
                <button v-on:click="changeDel(index)">删除</button>

            </li>
        </ul>
        <div class="hide" v-show="!flag">
            <h4>回复</h4>
            <h3><input type="text" v-model="name2"></h3>
            <p><textarea v-model="text2"></textarea></p>
            <button v-on:click="confirm()">确定</button>
            <button v-on:click="flag=!flag">取消</button>
        </div>
    </div>


    <script>
        const vm = new Vue({
            el: ".box",
            data: {
                name: '',
                text: '',
                arr: [],
                flag: true,
                name2: '',
                text2: '',
                arr2: [],
            },
            methods: {
                changeBtn() {
                    let obj = [];
                    obj.name = this.name;
                    obj.text = this.text;
                    this.arr.push(obj);
                    this.name = '';
                    this.text = '';
                    // console.log(obj);

                },
                changeDel(index) {
                    this.arr.splice(index, 1);
                },
                confirm() {
                    let obj2 = [];
                    obj2.name2 = this.name2;
                    obj2.text2 = this.text2;
                    this.arr2.push(obj2);
                    this.name2 = '';
                    this.text2 = '';
                    console.log(obj2);
                    this.flag = '!flag';
                    console.log(this.arr2);
                }


            }
        })
    </script>
</body>

</html>